<template>
	<div>
		<d2-container v-if="!proShow">
			<!-- 头部 -->
			<div slot="header" style="display:flex; justify-content: space-between;">
				<div>优惠卷</div>
				<div><el-button type="primary" size="small " icon="el-icon-plus" @click="onPreferAdd">添加</el-button></div>
			</div>
			<!-- 表格 -->
			<div>
				<template>
					<el-table stripe highlight-current-row style="width: 100%" :data="preferData">
						<el-table-column type="index" width="50"></el-table-column>
						<el-table-column prop="name" label="优惠卷名称"></el-table-column>
						<el-table-column label="满减卷">
							<template slot-scope="scope">
								<span v-if="scope.row.type == 1">{{ scope.row.price }}-{{ scope.row.jian }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="zhekou" label="折扣卷"></el-table-column>
						<el-table-column prop="adminname" label="发布人"></el-table-column>
						<el-table-column prop="start_time" label="开始时间"></el-table-column>
						<el-table-column prop="end_time" label="结束时间"></el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.type == 1" type="success">满减</el-tag>
								<el-tag type="warning" v-if="scope.row.type == 2">折扣</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="发放人群">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.user_state == 1">全部用户</el-tag>
								<el-tag type="warning" v-if="scope.row.user_state == 2">部分用户</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="发放状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.state == 1">未发放</el-tag>
								<el-tag type="danger" v-if="scope.row.state == 2">已发放</el-tag>
								<el-tag type="info" v-if="scope.row.state == 3">已过期</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onCouponUpdata(scope.row.id)">修改</el-button>
								<el-button type="text" size="small" @click="onCoupDel(scope.row.id)">删除</el-button>
								<el-button type="text" size="small" @click="onGrant(scope.row.id)" v-if="scope.row.state == 1">发放</el-button>
								<el-button type="text" size="small" @click="onDetails(scope.row.id)" v-if="scope.row.state !=1">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<!-- 分页 -->
			<template slot="footer">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="page.current"
					layout="total, prev, pager, next, jumper"
					:total="page.total"
					:page-size="page.size"
				></el-pagination>
			</template>
			<!-- 添加弹窗 -->
			<el-dialog title="优惠卷" :visible.sync="dialogVisible" width="500px" :before-close="dialogVisibleClose">
				<el-form label-width="100px" style="width: 400px;" :model="form" ref="preferForm">
					<el-form-item label="名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
					<el-form-item label="简介" prop="des"><el-input v-model="form.des" maxlength="20" show-word-limit></el-input></el-form-item>
					<el-form-item label="满减"><el-switch v-model="manjian"></el-switch></el-form-item>
					<el-form-item label="满额" v-show="manjian" porp="price"><el-input v-model="form.price">></el-input></el-form-item>
					<el-form-item label="减额" v-show="manjian" porp="jian"><el-input v-model="form.jian"></el-input></el-form-item>
					<el-form-item label="折扣"><el-switch v-model="zhekou"></el-switch></el-form-item>
					<el-form-item label="折扣" v-show="zhekou" prop="zhekou"><el-input v-model="form.zhekou"></el-input></el-form-item>
					<el-form-item label="开始时间" size="small" required prop="start_time">
						<el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-form-item label="时间" size="small" required prop="end_time">
						<el-date-picker v-model="form.end_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">确定</el-button>
						<el-button @click="dialogVisibleClose">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 发放弹窗 -->
			<el-dialog title="请选择要发放给的用户" :visible.sync="dialogFaFang" width="400px">
				<el-dialog width="500px" title="指定用户发放" :visible.sync="innerVisible" append-to-body>
					<el-table :data="userData" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column property="id" label="用户id"></el-table-column>
						<el-table-column property="nickname" label="昵称"></el-table-column>
						<el-table-column property="balance" label="余额"></el-table-column>
					</el-table>
					<div slot="footer"><el-button type="success" @click="onUserFa">发放</el-button></div>
				</el-dialog>
				<el-button type="primary" @click="onCouponGrant(1)">全部发放</el-button>
				<el-button type="warning" @click="onCouponGrant(2)">指定发放</el-button>
			</el-dialog>
		</d2-container>
		<pre-details v-model="proShow" :id="id"></pre-details>
	</div>
	
</template>

<script>
	import preDetails from './preDetails'
import { getPrefer, postPreferAdd, getPreferEdit, postPreferUpdate, getPreferDel, postPreferFa, getUserList } from '@/api/api';
export default {
	components:{
		preDetails
	},
	data() {
		return {
			proShow:false,		//页面显示
			dialogVisible: false,
			dialogFaFang: false,
			innerVisible: false,
			manjian: true,
			zhekou: false,
			preferData: [],
			userData: [], //用户
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			form: {
				name: '',
				price: '',
				jian: '',
				start_time: '',
				end_time: '',
				zhekou: '',
				des:''
			},
			id: -1,
			grantId: -1,
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			multipleSelection: '' //用户多选
		};
	},
	watch: {
		manjian(val) {
			if (val) {
				this.zhekou = false;
				return;
			}
		},
		zhekou(val) {
			if (val) {
				this.manjian = false;
				return;
			}
		}
	},
	mounted() {
		this.getCouon();
	},
	methods: {
		//列表加载
		getCouon() {
			let data = {
				page: this.page.current
			};
			getPrefer(data).then(res => {
				if (res.state == 0) {
					this.preferData = res.data.data;
					this.page.size = res.data.per_page;
					this.page.total = res.data.total;
				}
			});
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getCouon();
		},
		//添加
		onPreferAdd() {
			this.id = -1;
			this.dialogVisible = true;
		},
		//修改
		onCouponUpdata(id) {
			getPreferEdit(id).then(res => {
				if (res.state == 0) {
					this.form.name = res.data.name;
					this.form.price = res.data.price;
					this.form.jian = res.data.jian;
					this.form.zhekou = res.data.zhekou;
					this.form.start_time = res.data.start_time;
					this.form.end_time = res.data.end_time;
					this.form.type = res.data.type;
					this.form.des=res.data.des;
					if (this.form.type == 1) {
						this.manjian = true;
					} else {
						this.zhekou = true;
					}
					this.id = id;
					this.dialogVisible = true;
				}
			});
		},
		dialogVisibleClose() {
			this.dialogVisible = false;
			this.$refs.preferForm.resetFields();
		},
		onCoupDel(id) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getPreferDel(id).then(res => {
					if (res.state == 0) {
						this.$message.success('更改成功');
						this.getCouon();
					}
				});
			});
		},
		//发放用户卷
		onGrant(id) {
			this.grantId = id;
			this.dialogFaFang = true;
		},
		onCouponGrant(state) {
			if (state == 1) {
				this.$confirm('此操作将发放优惠卷给全部用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//全部发放
					let data = {
						preferid: this.grantId,
						user_state: 1
					};
					postPreferFa(data).then(res => {
						if (res.state == 0) {
							this.$message.success('发放成功');
							this.getCouon();
							this.dialogFaFang = false;
						}
					});
				});
			} else {
				getUserList().then(res => {
					if (res.state == 0) {
						this.userData = res.data;
						this.innerVisible = true;
					}
				});
			}
		},
		//指定用户发放
		onUserFa() {
			this.$confirm('此操作将发放优惠卷给指定用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (this.multipleSelection != '') {
					let data = {
						preferid: this.grantId,
						user_state: 2,
						userid: this.multipleSelection
					};
					postPreferFa(data).then(res => {
						if (res.state == 0) {
							this.$message.success('发放成功');
							this.getCouon();
							this.multipleSelection = '';
							this.innerVisible = false;
							this.dialogFaFang = false;
						}
					});
				} else {
					this.$message.error('请选择用户!');
				}
			});
		},
		//用户多选
		handleSelectionChange(val) {
			if (val.length >= 1) {
				this.multipleSelection = val[0].id.toString();
				for (let i = 1; i < val.length; i++) {
					this.multipleSelection = this.multipleSelection + ',' + val[i].id.toString();
				}
			}
		},
		//提交
		onSubmit() {
			if (this.form.name != '' && this.form.start_time != '' && this.form.end_time != '') {
				if (this.manjian) {
					if (parseFloat(this.form.price) >= parseFloat(this.form.jian)) {
						this.form.type = 1;
						this.form.zhekou = '';
					} else {
						this.$message.error('满额不得小于减额');
						return;
					}
				} else {
					this.form.type = 2;
					this.form.price = '';
					this.form.jian = '';
				}
				if (this.id == -1) {
					//添加
					postPreferAdd(this.form).then(res => {
						if (res.state == 0) {
							this.$message.success('添加成功');
							this.getCouon();
							this.dialogVisibleClose();
						} else {
							this.$message.error(res.msg);
						}
					});
				} else {
					let data = {
						id: this.id,
						name: this.form.name,
						price: this.form.price,
						jian: this.form.jian,
						zhekou: this.form.zhekou,
						start_time: this.form.start_time,
						end_time: this.form.end_time,
						type: this.form.type,
						des:this.form.des
					};
					postPreferUpdate(data).then(res => {
						if (res.state == 0) {
							this.$message.success('修改成功');
							this.getCouon();
							this.dialogVisibleClose();
						} else {
							this.$message.error(res.msg);
						}
					});
				}
			} else {
				this.$message.error('内容不能为空');
				return;
			}
		},
		onDetails(id){		//详情
			this.id=id;
			this.proShow=true
		}
	}
};
</script>

<style></style>
